<template>
  <div class="box">
    <div class="content">
      <div class="header">
        <!-- 头部标题 -->
        <div class="h_title">
          <span class="title">查找数据</span>
        </div>

        <!-- 按昵称搜索 -->
        <div class="operation">
          <div class="search">
            <el-input v-model="search_name" @keyup.enter="filterUserName" filterable clearable placeholder="请输入昵称"></el-input>
          </div>
        </div>
      </div>

      <!-- 表格数据 -->
      <div>
        <el-table 
            class="table" 
            :data="tempList" 
            style="width: 100%" 
            height="400"
            :row-class-name="tableRowClassName"
            @row-click="showOne">
          <el-table-column label="序号" type="index" :index="indexMethod" width="60" />
          <el-table-column prop="pagecode" label="编号" width="200" />
          <el-table-column prop="num" label="页码" width="200" />
          <el-table-column prop="username" label="评判人" width="300" />
          <el-table-column 
              prop="result" 
              label="评判结果" 
              width="300"
              :filters="[
              {text: '优秀', value: '优秀'},
              {text: '一般', value: '一般'},
              {text: '排除', value: '排除'}
            ]"
            :filter-method="filterResult"/> 
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tempList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" 
      />
    </div>

    <!-- 弹出框 -->
    <el-dialog
      v-model="showDialog"
      width="80%"
      destroy-on-close
      center>
        <div class="dialog_box">
          <!-- 图片 -->
          <div class="dialog_img_box">
            <VueCropper
              class="dialog_img"
              :img="dialogImg"
              :canMove=true
              ref="cropper">
            </VueCropper>
          </div>

          <div class="avatar_box">
            <div class="item_box" >
              <span>评判人 : {{ tempList[index-1].username }}</span><br>
              <span>评判结果 :  {{ tempList[index-1].result }}</span>
            </div>
          </div>
        </div>
      
        <template #footer>
          <span class="current_num">{{ this.index }} / {{ this.length }}</span>
          <span class="change_view">
            <el-button type="primary"  @click="clickPrev" :disabled="index === 1">上一个</el-button>
            <el-button type="primary" @click="clickNext"  :disabled="index === length">下一个</el-button>
          </span>
          <span>
            <el-button @click="showDialog = false">返回</el-button>
            <el-button type="primary" @click="showDialog = false">确定</el-button>
          </span>
        </template>
    </el-dialog>
  </div>
</template>

<script>
  import { VueCropper } from 'vue-cropper'

  export default {
    components: {
      VueCropper
    },
    data() {
      return {
        tempList: [],     // 表格数据

        index: 1,   // 未完成数据下标
        length: 0,  // 源数据总数

        search_name: '',     // 搜索栏绑定昵称 

        currentPage: 1,   //当前页
        pageSize: 10,     //每页行数

        showDialog: false,    // 控制 dialog 显示与隐藏
        dialogImg: '',        // dialog 显示图片 url
      }
    },
    watch: {
      'search_name': function() {
        if (!this.search_name) this.tempList = []
      }
    },
    methods: {
      // 按评判结果筛选
      filterResult(val, row) {
        return row.result === val
      },

      // 查找昵称
      async filterUserName() {
        this.tempList = []
        let res = await this.axios.get(`http://wuwei.dayaar.com.cn:5432/getOneEval/${this.search_name}`)
        this.tempList = res.data
        this.length = res.data.length
      },

      // ----- 分页 --------
      // 每页条数切换
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.handleCurrentChange(this.currentPage);
      },
      // 页码切换
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.currentChangePage(this.tempList, this.currentPage);
      },
      // 分页方法
      currentChangePage(list, currentPage) {
        let from = (currentPage - 1) * this.pageSize;
        // let from = currentPage * this.pageSize;
        let to = currentPage * this.pageSize;
        this.tempList = [];
        for (; from < to; from++) {
          if (list[from]) {
            this.tempList.push(list[from]);
          }
        }
      },

      // 自定义下标
      indexMethod(index) {
        return index + 1
      },

      // 获取 行 index
      tableRowClassName({row, rowIndex}) {
        row.index = rowIndex
      },

      // 点击获取某一行数据
      async showOne(row) {
        this.index = row.index + 1
        console.log(this.index);
        this.showDialog = true

        // 对话框中的图片
        this.dialogImg = 'http://www.dayaar.com.cn/evaluation-platform' + row.filename
      },

      // 点击【上一个】切换图片
      clickPrev() {
        let index = this.index --
        this.dialogImg = 'http://www.dayaar.com.cn/evaluation-platform' + this.tempList[index].filename
      },
      
      // 点击【下一个】切换图片
      clickNext() {
        let index = this.index ++
        this.dialogImg = 'http://www.dayaar.com.cn/evaluation-platform' + this.tempList[index].filename
      }
    },
    created() {
      this.handleSizeChange(this.pageSize)
    }
  }
</script>

<style lang="less" scoped>
  @import url('../../styles/global.less');
  .box {
    .dialog_box {
      width: 100%;
      display: flex;
      justify-content: space-around;
      .dialog_img_box {
        width: 60%;
        .dialog_img {
          width: 100%;
          height: 400px;
        }
      }
      .avatar_box {
        width: 20%;
        margin-top: 30px;
      }
      
    }
  }
</style>

<style>
  .el-dialog {
    margin: 35px auto;
  }
  .el-dialog__body {
    padding: 10px 0 !important;
  }
  .avatar {
    width: 100%;
  }
  .current_num {
    position: relative;
    left: -200px;
  }
  .change_view {
    position: relative;
    left: -100px;
  }
</style>